<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>停车券使用统计</title>
    <link rel="stylesheet" href="${ctx}/static/plug/frozenui-1.3.0/css/frozen.css" media="all">
    <script src="${ctx}/static/js/laydate/laydate.js"></script>
    <script src="${ctx}/static/js/echarts.min.js" type="text/javascript"></script>
    <style type="text/css">
    	body{
    		font-size: 14px;
    	}
    
        .content {
            padding-top: 10px;
            padding-left: 20px;
            padding-right: 20px;
            
        }

        .demo-block {
            position: relative;
        }

        .demo-block .ui-header,
        .demo-block .ui-footer {
            position: absolute;
        }

        .demo-block > .ui-list, .demo-block > .ui-form, .demo-block > .ui-tooltips {
            margin-bottom: 20px;
        }

        .content {
            padding-top: 10px;
            padding-left: 20px;
            padding-right: 20px
        }

        .content div {
            width: 100%;
            padding-top: 10px
        }

        .title {
            color: #5D5D5D;
            font-size: 15px
        }

        .error {
            color: red;
            font-size: 10px
        }

        .register-input {
            padding-top: 20px !important;
        }

    </style>
</head>
<body>

<section class="ui-container">
    <div class="ui-flex  ui-flex-ver ui-flex-pack-center content">

        <div style="margin-top: 5px; margin-left: 10px">
            <h5 class="ui-txt-info" style="font-size: 14px">账号名称:&nbsp;&nbsp;<span>${parkingLotCustomer.name}</span></h5>
        </div>

        <div style="margin-top: 0px; margin-left: 10px">
            <h2 class="ui-txt-info"><span>停车券使用情况:</span>
            </h2>
        </div>

        <div>
             <c:forEach var="vo" items="${vo}">
             
             <ul class="ui-grid-halve">
             			<c:if  test="${vo.couponMoneyType == 1}">
                        <h1 class="ui-txt-info">${vo.shopCouponName}</h1>
                        </c:if>
                        <c:if  test="${vo.couponMoneyType == 2}">
                        <h1 class="ui-txt-info">全免停车券</h1>
                        </c:if>
                        <c:if test="${vo.limitModeType == 1}">
                        	<p> ${vo.couponLimitType}总共有${vo.totalCount}张，使用了${vo.usedCount}张，剩余${vo.totalCount-vo.usedCount }张。</p>
                		</c:if>
                		 <c:if  test="${vo.limitModeType == 2}">
             				<p>剩余库存${vo.inventory}</p>
             			</c:if>
                </ul>
             
			</c:forEach>
			
        </div>
    </div>

    <div style="width: 100%" align="center">
        <div id="div-main" style="width: 90%;height:140px;" align="center"></div>
        <div class="ui-notice-btn" style="text-align: center; padding-top: 0px">
        </div>
    </div>
</section>

<section id="dialog">
    <div class="ui-dialog" id="div_dialog">

    </div>
</section>

</body>
<script src="${ctx}/static/plug/frozenui-1.3.0/lib/zepto.min.js"></script>
<script src="${ctx}/static/plug/frozenui-1.3.0/js/frozen.js"></script>
<script>

    var paramObj = {
        "parkingLotCouponsParams": "${parkingLotCouponsParams}",
        "couponStatisticParams": "${couponStatisticParams}",
        "authId":"${bmsUser.id}"
    };

    $(function () {
        var currentDate = new Date().format("yyyy-MM-dd").toString();
        $("#spanDateSelected").html(currentDate);
        initDateSelected();
        $("#spanDateSelected").bind("click", function () {
            $(".ui-dialog").addClass("show");
        });


        $("#btnCheckTransDetail").bind("click", function () {
            var select_date = $("#spanDateSelected").html();
            var hrefUrl = "${action}?params=" + paramObj.parkingLotCouponsParams + "&date=" + select_date+"&authId="+paramObj.authId;
            window.location.href = hrefUrl;
        });

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('div-main'));

        // 指定图表的配置项和数据
        var defaultOption = {
            title: {
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{c}元({d}%)"
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(defaultOption);

        function resetOption(data) {
            console.log(JSON.parse(data));
            myChart.setOption({
                series: [{
                    data: JSON.parse(data)//[{"name":"餐饮类","value":64},{"name":"黄金珠宝","value":58}]
                }]
            });
        }

        function initDateSelected() {
            laydate.render({
                show: true,
                elem: '#div_dialog', //指定元素
                position: 'static',
                min: GetDateStr(-30),
                max: GetDateStr(0),
                showBottom: false,
                btns: ['confirm'],
                done: function (value, date, endDate) {
                    $(".ui-dialog").removeClass("show");
                    console.log(value); //得到日期生成的值，如：2017-08-18
                    $("#spanDateSelected").html(value);
                    var paraObj = {
                        "params": paramObj.couponStatisticParams,
                        "date": value,
                        "authId":paramObj.authId
                        
                    };
                    console.log(paramObj.authId);
                    $.post("${action}", paraObj, function (obj) {
                        console.log(obj);
                        if (obj.result) {
                            //showTips("info", "绑定成功");
                            var vo = obj.data;
                            var html="";
                            for (var i = 0; int < vo.length; int++) {
								html += '<li><div class="ui-grid-halve-img ui-border-r"><h1 class="ui-txt-info">'+ vo[i].shopCouponName +'</h1><p>'
		                           + '总共有'+ vo[i].totalCount +'张，使用了'+ vo[i].usedCount +'张，剩余'+ (vo[i].totalCount - vo[i].usedCount) +'张。</p></div></li><br>';
							}
                            
                        } else {
                            showTips("info", "获取业务数据失败");
                        }
                    });
                }

            });
        }

        function dataLeftCompleting(value){
            return parseInt(value) < 10 ? "0" + value : value;
        }

        function GetDateStr(AddDayCount) {
            var dd = new Date();
            dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期
            var y = dd.getFullYear();
            var m = dd.getMonth() + 1;//获取当前月份的日期
            var d = dd.getDate();
            return y + "-" + dataLeftCompleting(m) + "-" + dataLeftCompleting(d);
        }

    });
</script>
</html>
